<template>
	<view class="page-backgroud">
		<view class="info-box">
			<view class="uni-form-item uni-column child-box">
							<view class="title">孩子姓名:</view>
							<input class="uni-input input" v-model="childName" focus />
			</view>
			<view class="uni-form-item uni-column phone-box">
							<view class="title">电话号码:</view>
							<input class="uni-input input" v-model="phoneNum" maxlength="11" />
			</view>
		</view>
		<button class="button" @click="saveInfo()">保存</button>
		<div style="width: 100%;height: 5%;margin-top: 1%;">
			<div style="text-align: center;">
				<checkbox @click="isAccept = !isAccept" v-model="isAccept" style="transform:scale(0.7);color: #5A95EF;"  />同意
				<span style="color: #5A95EF;" @click="toUserProtocal()">《用户服务协议》</span>及<span style="color: #5A95EF;" @click="toPrivacyProtocal()">《隐私协议》</span>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { wxLogin } from '@/common/api/quickRegister.js';
	import { setToken, getToken } from '@/common/utils/auth.js';
	import { updateInfo} from '@/common/api/quickRegister.js';
	export default {
		data() {
			return {
				isAccept:false,
				childName:'',
				phoneNum:''
			}
		},
		methods:{
			toPrivacyProtocal:function(){
				uni.navigateTo({
					url:"/pagesA/privacyProtocal/privacyProtocal"
				})
			},
			toUserProtocal:function(){
				uni.navigateTo({
					url:"/pagesA/userProtocol/userProtocol"
				})
			},
			saveInfo:function(){
			let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(!this.isAccept){
					uni.showToast({
						title: '请同意隐私协议',
						icon: 'error'
					})
				}else if(this.childName.length === 0 || this.childName === null){
					uni.showToast({
						title: '名字不能为空',
						icon: 'error'
					})
				}else if(this.phoneNum.length === 0 || this.phoneNum === null){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'error'
					})
				}else if(!reg.test(this.phoneNum) || this.phoneNum.length < 11){
					uni.showToast({
						title: '手机号有误',
						icon: 'error'
					})
				//没有授权登录修改信息
				}else if(!uni.getStorageSync("isAuthrization") && !uni.getStorageSync("openid")){
					//console.log('没有授权登录修改信息')
					uni.setStorageSync("childName",this.childName);
					uni.setStorageSync("phoneNum",this.phoneNum);
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				//授权登陆后修改信息
				}else if(uni.getStorageSync("isAuthrization") && uni.getStorageSync("isAlreadyLogin")){
					console.log('授权登陆后修改信息')
					let data = {
						childName:this.childName,
						phone:this.phoneNum
					}
					updateInfo(data).then(res => {
						uni.setStorageSync("childName",this.childName);
						uni.setStorageSync("phoneNum",this.phoneNum);
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					}).catch((e) => {
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
						
					})
				}else{
					//console.log('授权登陆')
					let that = this
					let data = {
						authType:'wx',
						cellphone:this.phoneNum,
						childName:this.childName,
						openId:uni.getStorageSync('openid'),
						password:'',
						url:uni.getStorageSync('avatarUrl'),
						username:uni.getStorageSync('username')
					}
					console.log(data)
					wxLogin(data).then(res =>{
						if(res.data.code === 200){
							//uni.setStorageSync('session_key', response.data.session_key);
							uni.setStorageSync("childName",that.childName);
							uni.setStorageSync("phoneNum",that.phoneNum);
							uni.setStorageSync("isAuthrization", true);
							uni.setStorageSync('isAlreadyLogin', true);
							setToken(res.data.data)	
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
							uni.navigateTo({
								url:'/pages/photoLogin/photoLogin'
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
					})	
				}
			},

				
		},
		onLoad() {
			this.childName = uni.getStorageSync("childName");
			this.phoneNum = uni.getStorageSync("phoneNum");
		}
		}
</script>

<style>
	.page-backgroud{
		 width: 100%;
		 height: 100%;
		 padding-top: 10%;
		 background: #f6f6f6;
	}
	.info-box{
		width: 90%;
		height: 15%;
		margin: 0 auto 10%;
		padding-top: 5%;
		background: #e8e1da;
	}
	.child-box{
		width: 80%;
		height: 40%;
		margin: 3% auto;
		display: flex;
	}
	.phone-box{
		width: 80%;
		height: 40%;
		margin: 0 auto;
		display: flex;
	}
	.title{
		color:#5A95EF;
		float: left;
	}
	.input{
		float: right;
		text-align: center;
		border-bottom:0.5px #5A95EF solid;
	}
	.button{
		width: 90%;
		color: white;
		background:#5A95EF;
	}
</style>